<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import resize from './resize'
  import { req } from '../../../api/base/BaseApi'
  // import index from './index'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '390px'
      }
    },
    data() {
      return {
        acoustic_emissionData: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getChartData()
        setTimeout(this.initChart, 1500)
      })
    },

    methods: {
      getChartData() {
        req('/api/sys/auth/monitor/acoustic_emission', 'POST', '').then(response => {
          this.acoustic_emissionData = response.data
        }).catch(() => console.log('page request error'))
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        console.log(this.acoustic_emissionData)
        this.chart.setOption({
          backgroundColor: '#ffffff',
          title: {
            text: '声发射信号定位点',
            x: 'center'
          },
          tooltip: {
            trigger: 'axis',
            showDelay: 0,
            axisPointer: {
              show: true,
              type: 'cross',
              lineStyle: {
                type: 'dashed',
                width: 1
              }
            }
          },
          legend: {
            data: ['声发射信号']
          },
          xAxis: [
            {
              type: 'value',
              scale: true,
              max: 2000,
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [{
            type: 'scatter',
            data: this.acoustic_emissionData,
            markLine: {
              symbol: 'none',
              data: [
                [
                  { name: '环焊缝', value: '220', xAxis: 0, yAxis: 220, itemStyle: { normal: { color: 'red' }}},
                  { xAxis: 2000, yAxis: 220 }
                ]
              ]
            }
          }]

        })
      }
    }
  }

</script>

<style scoped>

</style>
